<template>
<span :class="['ve-sort-arrow', { 'is-horizontal': horizontal }]" @click="onSort" :style="sortStyle">
  <svg :width="size" :height="size" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <template v-if="name === 'triangle'">
      <path d="M13.5386456,9.42945 C13.7254993,9.42962603 13.8938319,9.53775409 13.965089,9.70338486 C14.0363461,9.86901564 13.9964811,10.0594994 13.8640975,10.1859443 L8.32630386,15.8703774 C8.25847912,15.9351887 8.17494464,15.9756958 8.08748273,15.9918986 L7.99914805,16 C7.88078664,16 7.76242524,15.9567925 7.67199224,15.8703774 L2.13590247,10.1859443 C2.00329809,10.0592896 1.96354041,9.86840857 2.03523501,9.70262874 C2.10692962,9.53684889 2.27589445,9.42896347 2.46305828,9.42945 L13.5386456,9.42945 Z M10.808,11.029 L5.19,11.029 L7.998,13.913 L10.808,11.029 Z" :fill="descendColor"></path>
      <path d="M8.00085199,0 L8.08918666,0.0081014165 C8.17664857,0.0243042495 8.26018305,0.064811332 8.3280078,0.129622664 L13.8658014,5.82879129 C13.9984059,5.95544602 14.0381635,6.14632705 13.966469,6.3121069 C13.8947743,6.47788674 13.7258096,6.58577218 13.5386456,6.58528397 L2.46305828,6.58528397 C2.27620471,6.58510959 2.10787208,6.47698154 2.03661503,6.31135076 C1.96535797,6.14571999 2.00522293,5.95523627 2.13760641,5.82879129 L7.67369617,0.129622664 C7.74152092,0.064811332 7.8250554,0.0243042495 7.91251731,0.0081014165 L8.00085199,0 Z M8,2.088 L5.186,4.985 L10.815,4.985 L8,2.088 Z" :fill="ascendColor"></path>
    </template>
    <template v-else-if="name === 'triangle-fill'">
      <path d="M13.5386456,9.59003243 C13.7254993,9.59020515 13.8938319,9.6983332 13.965089,9.86396398 C14.0363461,10.0295948 13.9964811,10.2200785 13.8640975,10.3465235 L8.32630386,15.8703774 C8.14543787,16.0432075 7.85285823,16.0432075 7.67199224,15.8703774 L2.13590247,10.3465235 C2.00329809,10.2198687 1.96354041,10.0289877 2.03523501,9.86320786 C2.10692962,9.697428 2.27589445,9.58954258 2.46305828,9.59003243 L13.5386456,9.59003243 Z" :fill="descendColor"></path>
      <path d="M8.3280078,0.129622664 L13.8658014,5.75650344 C13.9984059,5.88315817 14.0381635,6.07403919 13.966469,6.23981905 C13.8947743,6.40559888 13.7258096,6.51348432 13.5386456,6.51299278 L2.46305828,6.51299278 C2.27620471,6.51282173 2.10787208,6.40469368 2.03661503,6.2390629 C1.96535797,6.07343213 2.00522293,5.88294841 2.13760641,5.75650344 L7.67369617,0.129622664 C7.85456217,-0.0432075547 8.14714181,-0.0432075547 8.3280078,0.129622664 Z" :fill="ascendColor"></path>
    </template>
    <template v-else-if="name === 'arrow'">
      <path d="M8.80929243,1.35685521 L8.89901876,1.43431458 L12.8990188,5.43431458 C13.2114382,5.74673401 13.2114382,6.25326599 12.8990188,6.56568542 C12.6150011,6.84970309 12.1705598,6.87552288 11.8573742,6.64314479 L11.7676479,6.56568542 L8.333,3.131 L4.89901876,6.56568542 C4.61500109,6.84970309 4.17055983,6.87552288 3.85737424,6.64314479 L3.76764791,6.56568542 C3.48363024,6.28166776 3.45781045,5.8372265 3.69018854,5.5240409 L3.76764791,5.43431458 L7.76764791,1.43431458 C8.05166558,1.15029691 8.49610684,1.12447712 8.80929243,1.35685521 Z" :fill="ascendColor"></path>
      <path d="M3.85737424,9.35685521 C4.13924127,9.14771493 4.5274254,9.14771493 4.80929243,9.35685521 L4.89901876,9.43431458 L8.333,12.869 L11.7676479,9.43431458 L11.8573742,9.35685521 C12.1705598,9.12447712 12.6150011,9.15029691 12.8990188,9.43431458 C13.1830364,9.71833224 13.2088562,10.1627735 12.9764781,10.4759591 L12.8990188,10.5656854 L8.89901876,14.5656854 L8.80929243,14.6431448 C8.5274254,14.8522851 8.13924127,14.8522851 7.85737424,14.6431448 L7.76764791,14.5656854 L3.76764791,10.5656854 L3.69018854,10.4759591 C3.48104826,10.1940921 3.48104826,9.80590794 3.69018854,9.5240409 L3.76764791,9.43431458 L3.85737424,9.35685521 Z" :fill="descendColor"></path>
    </template>
    <template v-else>
      <path d="M6.89901876,1.40081124 C7.03271176,1.53450424 7.10919379,1.70374358 7.12846485,1.87810672 L7.13333333,2 L7.13333333,14 C7.13333333,14.4418278 6.77516113,14.8 6.33333333,14.8 C5.92549229,14.8 5.58893175,14.4948119 5.53956647,14.1003503 L5.53333333,14 L5.53233333,3.89749667 L2.89901876,6.53218209 C2.58659932,6.84460153 2.08006734,6.84460153 1.76764791,6.53218209 C1.48363024,6.24816442 1.45781045,5.80372316 1.69018854,5.49053757 L1.76764791,5.40081124 L5.76764791,1.40081124 C6.08006734,1.08839181 6.58659932,1.08839181 6.89901876,1.40081124 Z" :fill="ascendColor"></path>
      <path d="M9.94129716,14.7850879 L9.86364754,14.8090706 L9.77457765,14.82628 L9.77457765,14.82628 L9.66666667,14.8335033 L9.59489994,14.830328 L9.59489994,14.830328 L9.48391526,14.812459 L9.48391526,14.812459 L9.37777954,14.7797339 L9.37777954,14.7797339 L9.29508916,14.7422078 L9.29508916,14.7422078 L9.1997213,14.6832257 L9.1997213,14.6832257 L9.10051796,14.5987376 L9.10051796,14.5987376 C9.0596962,14.5579004 9.02386682,14.5132256 8.9934931,14.466057 L8.94184579,14.3725917 L8.94184579,14.3725917 L8.90555839,14.2804536 L8.90555839,14.2804536 L8.87770389,14.1663099 L8.87770389,14.1663099 L8.8709456,14.1163821 L8.86666667,14.0335033 L8.86666667,2.03350333 C8.86666667,1.59167553 9.22483887,1.23350333 9.66666667,1.23350333 C10.0745077,1.23350333 10.4110682,1.53869148 10.4604335,1.93315303 L10.4666667,2.03350333 L10.4666667,12.1015033 L13.1009812,9.46781458 C13.4134007,9.15539514 13.9199327,9.15539514 14.2323521,9.46781458 C14.5163698,9.75183224 14.5421895,10.1962735 14.3098115,10.5094591 L14.2323521,10.5991854 L10.2323521,14.5991854 C10.2036669,14.6273009 10.1802467,14.6476903 10.1556914,14.6666829 L10.2323521,14.5991854 C10.2016079,14.6299296 10.168984,14.6576484 10.1348502,14.6823417 L10.0426405,14.7398224 L10.0426405,14.7398224 L9.94129716,14.7850879 L9.94129716,14.7850879 Z" :fill="descendColor"></path>
    </template>
  </svg>
</span>
</template>

<script>
export default {
  name: 'VeSortArrow',
  props: {
    name: {
      type: String,
      validator(val) {
        return ['', 'arrow', 'arrow-side', 'triangle', 'triangle-fill'].includes(val)
      }
    },
    color: String,
    activeColor: String,
    size: Number,
    // 排序方式 ['ascend', 'descend']
    sort: String,
    // 是否横向显示
    horizontal: Boolean
  },
  data() {
    return {
      defaultActiveColor: 'black',
      sortord: this.sort || ''
    }
  },
  computed: {
    sortStyle() {
      const obj = {}
      if (this.size) {
        obj['font-size'] = this.size + 'px'
      }
      return obj
    },
    ascendColor() {
      return this.sortord === 'ascend' ? (this.activeColor || this.defaultActiveColor) : (this.color || 'currentColor')
    },
    descendColor() {
      return this.sortord === 'descend' ? (this.activeColor || this.defaultActiveColor) : (this.color || 'currentColor')
    }
  },
  methods: {
    onSort() {
      this.sortord = this.sortord === 'ascend' ? 'descend' : 'ascend'
      this.$emit('click', this.sortord)
    }
  }
}
</script>

<style lang="scss">
.ve-sort-arrow{
  overflow: hidden;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
  font-style: normal;
  fill: currentColor;
  cursor: pointer;
  &.is-horizontal{
    transform: rotate(90deg);
  }
}
</style>

